<template>
	<div class="header-index">
		<dv-decoration-10 style="width:25%;height:50%;" />
		<div class="header-title">
			<dv-decoration-8 :color="['#568aea', '#000000']" style="width:25%;height:50%;" />
			<div class="title">
				<!-- <dv-decoration-11 class="title-text" style="width:100%;height:100%;">人工智能实验室BIM可视化平台</dv-decoration-11> -->
				<span class="title-text">火炬二小数字孪生智慧校园</span>
				<div class="jump">
					<dv-decoration-6 class="title-bototm" :reverse="false" :color="['#50e3c2', '#67a1e5']" style="width:150px;height:10px;" />
				</div>
			</div>
			<dv-decoration-8 :reverse="true" :color="['#568aea', '#000000']" style="width:25%;height:50%;" />
		</div>
		<dv-decoration-10 style="width:25%;height:50%; transform: rotateY(180deg);" />
	</div>
</template>

<script>
</script>

<style lang="less" scoped>
@media only screen and (max-width: 1200px) {
  .title-text {
    font-size: 15px !important;
  }
}
	.header-index{
		height: 100%;
		width: 100%;
		display: flex;
		justify-content: space-between;
		// align-items: center;
		.header-title{
			height: 100%;
			width: 50%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.title{
				height: 100%;
        width: 50%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-end;
				.title-text{
					font-size: 23px;
          // min-width: 200px;
					color: #2BC7F6;
				}
				.jump{
					width: 100%;
					height: 30%;
					position: relative;
					.title-bototm{
						position: absolute;
						bottom: 7px;
						// left: -10px;
						left: 50%;
						transform: translateX(-50%);
					}
				}

			}
		}
	}
</style>
